<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息</title>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/common.css">
    <style>
        #app{
            height: calc(100vh - 80px);
        }
        .headBox{
            width: 100%;
            height: 8vh;
            text-align: center;
            font-size: 1em;
            color: white;
            padding-top: 2.5vh;
            background: rgb(3, 93, 255);
            border-bottom: 1px solid darkgray;
        }
        .listBox{
            width: 100%;
            height: auto;
        }
        .messageItem{
            width: 100%;
            height: 80px;
            background: white;
            position: relative;
            border-bottom: 1px solid darkgray;
        }
        .blank{
            height: 100%;
            width: 100%;
            line-height: 100%;
            text-align: center;
            font-weight: lighter;
            color: #8c939d;
            font-size: 0.5em;
            padding-top: 10vh;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="headBox">
        消息
    </div>

    <div class="listBox">
        <div class="messageItem" v-for="(item,index) in messageItem" @click="toMessageBox(index)">
<!--            头像-->
            <img :src="item.icon !== null ? item.icon : '/image/yunxizhushouIcon.png'"
                 style="display: inline-block;height: 60px;width: 60px;border-radius: 30px;position: absolute;top: 10px;left: 10px">
<!--            title-->
            <div style="display: inline-block;position: absolute;top: 15px;left: 80px;font-size: 1em"
                >{{item.title}}</div>
<!--            简要描述-->
            <div style="display: inline-block;position: absolute;left: 80px;bottom: 20px;font-weight: lighter;font-size: 0.4em;color: #8c939d"
                >{{item.message}}</div>
        </div>
    </div>

    <div class="blank">
        没有更多了~
    </div>

    <el-drawer
            title="我是标题"
            :visible.sync="drawer"
            :with-header="false"
            size="100%"
    >
        <div class="headBox">
            <img src="/image/fenxiDetailjiantou.png"
                 style="width: 50px;height: 50px;position: absolute;top: 0px;left: 0px"
                 @click="back"
            >
            {{messageItem[drawerIndex].title}}
        </div>
        <div>
<!--            聊天内容-->

        </div>
    </el-drawer>
</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el : "#app",
        mounted(){

        },
        methods : {
            toMessageBox(index){
                // localStorage.setItem('cuurrentMessageTitle',item.title)
                // localStorage.setItem('cuurrentMessageMessage',item.message)
                // localStorage.setItem('cuurrentMessageIcon',item.icon)
                // window.location.href = '/mainPage/messageBox'
                this.drawer = true
                const element = top.document.getElementById('myTabBar');
                element.style.display = 'none';
                this.drawerIndex = index
            },
            back(){
                const element = top.document.getElementById('myTabBar');
                element.style.display = 'block';
                this.drawer = false
            },
            talk(str){
                //1.显示用户打的字

                //2.发送请求
                let result = ''
                axios({
                    method : 'post',
                    url : '',
                    data : str,
                }).then((resp) => {
                    result = resp.data
                })
                //3.显示返回的语句

            }
        },
        data(){
            return {
                messageItem: [
                    {
                      title : "云曦智慧助手",
                      icon : "/image/yunxizhushouIcon.png",
                      message : "Hi,欢迎加入云曦大家庭!",
                    },
                ],
                drawer: false,
                drawerIndex : 0,
            }
        }
    })
</script>
</html>